<template>
    <div class="starModal">
        <p class="all">
            <input type="radio"  value="0"  v-model="inputdata"/>
            <span></span>
            <input type="radio" value="1" v-model="inputdata" />
            <span class="glyphicon glyphicon-star"></span>
            <input type="radio" value="2" v-model="inputdata" />
            <span class="glyphicon glyphicon-star"></span>
            <input type="radio" value="3" v-model="inputdata" />
            <span class="glyphicon glyphicon-star"></span>
            <input type="radio" value="4" v-model="inputdata" />
            <span class="glyphicon glyphicon-star"></span>
            <input type="radio" value="5" v-model="inputdata" />
            <span class="glyphicon glyphicon-star"></span>
        </p>
    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                inputdata:'5',
            }
        },
        props:['value'],
        watch: {
            inputdata: function(value) {
                console.log(value)
                this.$emit('input', value);
            }
        },
        mounted: function () {
            this.inputdata = this.value;
        }
    }
</script>
<style>
    .all > input {
        opacity: 0;
        position: absolute;
        width: 1.5em;
        height: 1.5em;
        margin: 0;
        z-index: 2;
        cursor: pointer;
        /*margin-left: 5px;*/
    }
    .all {
        margin: 0px 10px;
    }
    .all > input:nth-of-type(1),
    .all > span:nth-of-type(1) {
        display: none;
    }

    .all > span {
        font-size: 29px;
        /*color: gold;*/
        -webkit-transition: color .2s;
        transition: color .2s;
        margin-left: -1px;
        margin-right: 23px;
    }

    .all > input:checked ~ span {  color: #666;  }

    /*.color_xing .all > input:checked + span {*/
        /*color: gold;*/
    /*}*/
    .all > span {  color: gold;  }

    .all > input:checked + span {  color: gold;  }

</style>